<template>
  <div class="teacher">
    <Header>教师信息</Header>
    <div class="header">
      <img class="avatar" :src="teacher.teacherPicture" alt="">
      <div>
        <p class="name">{{ teacher.teacherName }}</p>
        <p>{{ teacher.teacherIntroduction }}</p>
      </div>
    </div>
    <div class="line"></div>
    <v-section1 :list="classList"/>
    <v-baseline/>
  </div>
</template>
<script>
  import Header from '@/common/_header.vue'
  import Baseline from '@/common/_baseline.vue'
  import Section1 from '@/components/index/section1.vue'
  export default {
    components: {
      'v-baseline': Baseline,
      'v-section1': Section1,
      'Header': Header
    },

    data() {
      return {
        teacher: {},
        classList: [],
        url:"http://39.105.212.132:8081",
        isL: false
      }
    },

    beforeCreate(){
      this.$api({
        url:"/courseTeacher/"+this.$route.params.id,
        method:"get",
      }).then(res=>{
        this.teacher = res.data.data;
        console.log(res.data.data)
      })
    },

    methods:{
      goto(i)
      {
        localStorage.setItem("detail",JSON.stringify(this.classList[i]))
        this.$router.push({path:`/detail`})
      }
    }
  }
</script>
<style lang="less" scoped>

.line{
    height: 20px;
    background-color: rgba(68, 68, 68, 0.116);
  }

.header{
  display: flex;
  align-items: center;
  padding: 20px;
  .avatar{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;

    }
    .name{
        color: black;
        font-size: 28px;
        margin-bottom: 13px;
      }
  }

  li {
      width: 100%;
      padding: 2vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: flex;
      cursor: pointer;
      .word{
        flex: 1;
        display: table;
        margin-right: 12px;

        h3{
          font-size: 24px;
          font-weight: bolder;
          color: #333;
          margin-bottom: 1vw;
          display: table-caption;
        }
        .money{
          font-size: 24px;
          color: #ff0000;
          display: table-cell;
          vertical-align: bottom;
        }
        .buy{
          color: #999;
          display: table-cell;
          vertical-align: bottom;
          text-align: end;
        }
      }
      img {
        width: 200px;
        display: block;
        object-fit: cover;
        height: 120px;
        border-radius: 8px;
      }
    }
</style>
